<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理财产品页面</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>

        #d1 {
            width: 480px;
            height: 86vh;
            position: absolute;
            margin-top: 2vh;
            /*margin-left: 400px;*/
            right: 500px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            text-align: center;
            /**/
            /*    内容超出时，打开滚动条*/
            overflow: auto;
        }

        .h1 {
            margin-top: 10px;
        }

        .d1 {
            /*border: 1px solid red;*/
            width: 100%;
            /*!*    内容超出时，打开滚动条*!*/
            /*    overflow: auto;*/

        }

        .prod {
            margin-top: 10px;
            width: 94%;
            margin-left: 3%;
            height: 200px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        .prod > h2 {
            margin-top: 20px;
        }

        .b {
            width: 200px;
            height: 40px;
            border-radius: 5px;
            background-color: mediumseagreen;
            margin-top: 10px;
        }

        #d4 > input[type=text] {
            width: 240px;
            height: 40px;
            margin-top: 20px;
            padding-left: 20px;
        }

        #d4 > input[type=button] {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            background-color: mediumseagreen;
            margin-top: 10px;
        }

        #d4 > select {
            width: 260px;
            height: 40px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
    <script>
        $(function () {
            //查询理财产品信息
            $.ajax({
                url: "/product",
                data: {action: "finAll"},
                type: "post",
                dataType: "json",
                success: function (d) {
                    // console.log(d);
                    if (d.code == 1) {
                        var s = "";
                        //循环拼接字符串
                        for (var i = 0; i < d.data.length; i++) {
                            s += "<div class='prod'>" +
                                "<h2>" + d.data[i].p_name + "</h2><br>" +
                                "<span>日收益：" + d.data[i].p_rate + "%</span><br> " +
                                "<span>单&emsp;价：￥" + d.data[i].p_price + "</span><br>" +
                                "<input type='button' class='b'  value='购买' onclick='f(" + d.data[i].p_id + ")'>" +
                                "</div>"
                        }
                        //渲染
                        $(".d1").html(s);
                    }
                }
            })

            //根据用户id查询当前用户的所有银行卡信息
            var uid = $("#userid").text()

            //加载下拉款信息
            if (uid != "") {
                //查询该用户app账号
                $(".laySelect").append(" <option value='1'>app余额</option>")
                //查询该用户下银行卡
                $.ajax({
                    url: "/BankServlet",
                    type: "post",
                    data: {action: "findUid", u_id: uid},
                    dataType: "json",
                    success: function (d) {
                        // console.log(d);
                        if (d.code == 1) {
                            for (var i = 0; i < d.data.length; i++) {
                                var a = d.data[i].c_id;
                                var b = a.substring(a.length - 4);
                                $(".laySelect").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                            }

                        }
                    }
                })
            }

            //确定购买
            $("#btn5").click(function () {
                //获取下拉框选中项
                var c_id = $(".laySelect").select().val();   //下拉框选中项
                var p_id = $(".p_id").val();              //理财产品编号
                var num = $(".num").val();                //购买份额
                var price = $(".price").text();           //总价
                var u_id = $("#userid").text();
                var reg=/^[1-9]\d*$/;
                if (!reg.test(num)) {
                    alert("请输入要购买的份额");
                    return;
                }
                if (c_id == "-1") {
                    alert("请选择支付方式");
                    return;
                }
                if(p_id==""||p_id==null){
                    alert("请选择要购买的理财产品")
                    return;
                }
                var pwd=prompt("请输入支付密码");
                var reg2=/^[0-9]{6}$/
                if(pwd==null||pwd==""){
                    alert("取消购买");
                    return;
                }else if(!reg2.test(pwd)){
                    alert("您输入的支付密码格式不正确,应为6位数字组成的支付密码");
                    return;
                }
                //请求后端，执行购买理财产品
                $.ajax({
                    url:"/product",
                    type:"post",
                    data:{
                        action:"buyProduct",
                        u_id:u_id,
                        c_id:c_id,
                        p_id:p_id,
                        num:num,
                        pwd:pwd
                    },
                    dataType:"json",
                    success:function (d){
                        if(d.code==1){
                            alert(d.msg);
                            //清空文本框

                            //清空文本框数据
                            $(".p_id").val("");
                            $(".p_name").val("");
                            $(".p_price").val("");
                            $(".price").text("0");
                            $(".laySelect").select().val("-1")
                            //关闭遮罩层
                            $("#deviceadd").hide();
                        }else {
                            alert(d.msg);
                        }
                    }
                })


            })

            //份额失去焦点事件，计算总价
            $(".num").blur(function () {
                var p_price =parseFloat($(".p_price").val())
                var num=parseInt($(".num").val());
                var a=p_price*num;
                $(".price").text(a);
            })

            //取消
            $("#btn6").click(function () {

                //清空文本框数据
                $(".p_id").val("");
                $(".p_name").val("");
                $(".p_price").val("");
                $(".laySelect").select().val("-1")
                //关闭遮罩层
                $("#deviceadd").hide();
            })
        })

        //根据商品编号，查看商品信息，并渲染到文本框中
        function f(p_id) {
            //根据产品编号去请求后端拿到对饮理财产品信息
            if (p_id != "" && p_id != null && p_id != undefined) {
                //请求后端
                $.ajax({
                    url: "/product",
                    data: {action: "finaByPid", p_id: p_id},
                    type: "post",
                    dataType: "json",
                    success: function (d) {
                        console.log(d)
                        if (d.code == 1) {
                            //成功
                            //渲染数据
                            $(".p_id").val(d.data.p_id);
                            $(".p_name").val(d.data.p_name);
                            $(".p_price").val(d.data.p_price);
                            $(".num").val("0");
                            $(".price").text("0");
                            $(".laySelect").select().val("-1")
                            //
                        } else {
                            alert(d.msg);
                        }
                    }
                })
                //弹出遮罩层
                $("#deviceadd").show();
            } else {
                alert("请选择要购买的理财产品")
            }
        }
    </script>
</head>
<body>
<!--主体部分-->
<div id="d1">
    <h1 class="h1">理财产品</h1>
    <div class="d1">
        <!--                <div class="prod">-->
        <!--                    <h2>hhhhh</h2><br>-->
        <!--                    <span>日收益&emsp;：0.3%</span><br>-->
        <!--                    <span>单&emsp;&emsp;价：￥222</span><br>-->
        <!--                    <span>购买份额:</span><input type="text" class="num"  value="0"><br><br>-->
        <!--                    <input type="button" class="b" value="购买">-->
        <!--                </div>-->

    </div>
</div>
<!--修改时，弹出层 ，弹出遮罩层，和内容-->
<div id="deviceadd"
     style=" display: none;width: 100%;height: 100vh;position: fixed;top: 0vh;left: 0vh;background: rgba(48,48,48,0.7);">
    <div id="d4"
         style="width:500px;height:600px; display: block; position: absolute;  background-color: rgba(255,255,255,1);left: 70vh;top: 10vh;text-align: center">
        <h1 style="margin-top: 50px">购买理财产品</h1>
        <span>产品编号：</span><input type="text" class="p_id" placeholder="请输入产品编号" disabled><br>
        <span>产品名称：</span><input type="text" class="p_name" placeholder="请输入产品名称" disabled><br>
        <span>产品价格：</span><input type="text" class="p_price" placeholder="请输入产品单价" disabled><br>
        <span>购买份额：</span><input type="text" class="num" placeholder="请输入购买分额"  value="0"><br>
        <span>支付方式：</span><select name="interest" id="proName" class="laySelect">
        <option value="-1">----请选择----</option>
    </select><br>
        <span>合计：</span><span class="price">0</span><br>
        <input type="button" value="确定" id="btn5" style="margin-right: 30px">
        <input type="button" value="取消" id="btn6">
    </div>
</div>

</body>
</html>